<!DOCTYPE html>
<html lang="zh-cn">
  <head>
	<title>Flex Cases</title>
	<link rel="stylesheet" type="text/css" href="flex1.css">
  </head>
  <body>
	<h1>测试flexible box各种case</h1>

	<div style="background: gray; padding: 20px">
	  <h2>简单case</h2>
	  <div id="one">
		<p style="align-self: flex-end">flex item with <br> two longer lines </p>
		<span> flex item </span>
		<p>flex item</p>
	  </div>
	  
	  <div id="two">
		<span>flex item with<br> two longer lines</span>
		<span> flex item</span>
		<p>flex item</p>
	  </div>
	</div>

	<div style="background: snow; margin: 20px; padding: 10px">
	  <h2>Flex nav</h2>
	  <nav>
		<a href="/">Home</a>
		<a href="/about">About</a>
		<a href="/blog">Blog</a>
		<a href="/jobs">Jobs</a>
		<a href="/contact">Contact Us</a>
	  </nav>
	</div>

	<div>
	  <h2> Flex direction </h2>
	  <ul>
		<li>一</li>
		<li>二</li>
		<li>三</li>
		<li>四</li>
		<li>五</li>
	  </ul>
	</div>

	<div>
	  <h2>Flex Grow</h2>
	  <div id="grow">
		<div id="grow-child-1">
		  <p>flex-grow: first<br>(100px wide)</p>
		</div>
		<div id="grow-child-2">
		  <p>flex-grow: second<br>(100px wide)</p>
		</div>

		<div id="grow-child-3">
		  <p>flex-grow: third<br>(100px wide)</p>
		</div>
	  </div>
	</div>

	<div>
	  <h2>Flex Grow</h2>
	  <div id="shrink">
		<div id="shrink-child-1">
		  <p>flex-shrink: first<br>(100px wide)</p>
		</div>
		<div id="shrink-child-2">
		  <p>flex-shrink: second<br>(100px wide)</p>
		</div>

		<div id="shrink-child-3">
		  <p>flex-shrink: third<br>(100px wide)</p>
		</div>
	  </div>
	</div>
	
  </body>

  <script src="flex1.js"></script>
</html>
